<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <div th:fragment="content">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
            <h1 class="h2">个人中心</h1>
        </div>

        <div class="row g-4">
            <!-- 基本信息卡片 -->
            <div class="col-md-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0">
                        <h5 class="card-title mb-0">
                            <i class='bx bxs-user-detail text-primary'></i> 基本信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="text-muted">工号</label>
                            <p class="mb-0" th:text="${collector.id}">-</p>
                        </div>
                        <div class="mb-3">
                            <label class="text-muted">姓名</label>
                            <p class="mb-0" th:text="${collector.realName}">-</p>
                        </div>
                        <div class="mb-3">
                            <label class="text-muted">手机号</label>
                            <p class="mb-0" th:text="${collector.phone}">-</p>
                        </div>
                        <div class="mb-3">
                            <label class="text-muted">工作状态</label>
                            <p class="mb-0">
                                <span class="badge bg-success" th:if="${collector.status == 1}">
                                    <i class='bx bx-check'></i> 在岗
                                </span>
                                <span class="badge bg-secondary" th:if="${collector.status == 0}">
                                    <i class='bx bx-time'></i> 休息
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 工作统计卡片 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-transparent border-0">
                        <h5 class="card-title mb-0">
                            <i class='bx bxs-bar-chart-alt-2 text-primary'></i> 工作统计
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <!-- 总服务订单 -->
                            <div class="col-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="text-muted small">总服务订单</div>
                                    <div class="h4 mb-0" th:text="${orderStats['totalOrders'] ?: 0}">0</div>
                                    <div class="text-muted small">
                                        已完成：<span th:text="${orderStats['completedOrders'] ?: 0}">0</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 本月订单 -->
                            <div class="col-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="text-muted small">本月订单</div>
                                    <div class="h4 mb-0" th:text="${orderStats['monthlyOrders'] ?: 0}">0</div>
                                    <div class="text-muted small">
                                        已完成：<span th:text="${orderStats['monthlyCompletedOrders'] ?: 0}">0</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 平均评分 -->
                            <div class="col-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="text-muted small">平均评分</div>
                                    <div class="h4 mb-0 d-flex align-items-center">
                                        <span th:text="${#numbers.formatDecimal(evaluationStats['averageRating'] ?: 0, 1, 1)}">0.0</span>
                                        <i class='bx bxs-star text-warning ms-1'></i>
                                    </div>
                                    <div class="text-muted small">
                                        总评价：<span th:text="${evaluationStats['totalEvaluations'] ?: 0}">0</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 好评率 -->
                            <div class="col-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="text-muted small">好评率</div>
                                    <div class="h4 mb-0" th:text="${#numbers.formatDecimal(evaluationStats['goodRatePercent'] ?: 0, 1, 1) + '%'}">0%</div>
                                    <div class="text-muted small">
                                        完成率：<span th:text="${#numbers.formatDecimal(evaluationStats['completionRate'] ?: 0, 1, 1) + '%'}">0%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:fragment="script" th:inline="javascript">
        $(document).ready(function() {
            console.log('个人中心页面加载完成');
        });
    </script>
</body>
</html> 